<template>
  <div>
    <draggable
      v-model="apps"
      v-bind="dragOptions"
      @start.stop="start"
      @end.stop="end"
    >
      <transition-group  class="app-grid" type="transition" :name="!drag ? 'flip-list' : null">
        <div
          v-for="element in apps"
          :key="element.id"
          class="app-item"
          :class="[
            element.size ? 'icon-size-' + element.size : ''
          ]"
          @contextmenu.stop.prevent="$refs.ctxshow.showMenu($event, data)"
        >
          <div class="app-item-icon" @mouseenter="down" @mouseleave="up" @click="gotowebsite(element)">
            <img :src="element.icon" v-if="!element.size" class="app-item-img" />
          </div>
          <h2 class="app-title">{{element.title}}</h2>
        </div>
      </transition-group>
    </draggable>
    <e-vue-contextmenu ref="ctxshow" class="context-menu">
      <div>新链接打开</div>
      <div>编辑图标</div>
      <div>删除图标</div>
    </e-vue-contextmenu>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// import { mapState } from 'vuex'
console.log(draggable)
export default {
  name: 'app-grid',
  components: {
    draggable
  },
  data () {
    return {
      drag: false,
      timeout: ''
    }
  },
  computed: {
    apps: {
      get () {
        return this.$store.state.apps
      },
      set (value) {
        console.log(value)
        this.$store.commit('SET_APPS', value)
      }
    },
    dragOptions () {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },
  methods: {
    start () {
      this.drag = true
    },
    end () {
      this.drag = false
      this.$nextTick(() => {
        this.$parent.$parent.swiper.allowTouchMove = true
      })
    },
    down () {
      this.$parent.$parent.swiper.allowTouchMove = false
    },
    up () {
      this.$parent.$parent.swiper.allowTouchMove = true
      // this.$parent.$parent.swiper.detachEvents()
      // console.log('123')
    },
    gotowebsite (item) {
      const newTab = window.open('about:blank')
      newTab.location.href = item.url
    }
  }
}
</script>

<style lang="scss" scoped>
.app-grid {
  width: 1280px;
  margin: 0 auto;
  display: grid;
  margin-top: 40px;
  grid-template-columns: repeat(
    auto-fill,
    calc(var(--icon-size) + var(--icon-gap-y))
  );
  grid-template-rows: repeat(
    auto-fill,
    calc(var(--icon-size) + var(--icon-gap-x)  + 10px)
  );
  grid-auto-flow: dense;
  justify-content: center;
  box-sizing: border-box;
  .app-item {
    width: calc(var(--icon-size) + var(--icon-gap-x));
    height: calc(var(--icon-size) + var(--icon-gap-y) + 10px);
    padding: 0 calc(var(--icon-gap-y)/2) calc(var(--icon-gap-x)  + 10px);
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    .app-item-icon {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: var(--icon-radius);
      font-size: 12px;
      box-shadow: 0 0 5px #0000001a;
      transition: .2s;
      cursor: pointer;
    }
    @for $i from 1 to 5{
      @for $j from 1 to 5{
        &.icon-size-#{$i}x#{$j}{
          grid-column: span $j;
          grid-row: span $i;
          width: calc(var(--icon-size) * #{$j} + var(--icon-gap-y) * #{$j});
          height: calc(var(--icon-size) * #{$i} + (var(--icon-gap-x) + 10px) * #{$i});
          .app-item-icon {
            background: #fff;
          }
        }
      }
    }
    // &.icon-size-2x4, .icon-size-medium {
    //   grid-column: span 4;
    //   grid-row: span 2;
    //   width: calc(var(--icon-size) * 4 + var(--icon-gap-y) * 4);
    //   height: calc(var(--icon-size) * 2 + (var(--icon-gap-x) + 10px) * 2);
    //   .app-item-icon {
    //     background: #fff;
    //   }
    // }
    .app-item-img {
      display: block;
      object-fit: var(--icon-fit, cover);
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #fff;
    }
    .app-title {
      width: calc(100% + var(--icon-gap-y));
      margin-left: calc(var(--icon-gap-y) / 2 * -1);
      display: var(--icon-name);
      margin-top: 6px;
      text-align: center;
      color: var(--icon-nameColor);
      font-size: var(--icon-nameSize);
      line-height: 1.1;
      filter: drop-shadow(0px 2px 7px rgba(0,0,0,.8));
      display: block;
    }
  }
}
.context-menu {
  z-index: 999;
  border-radius: 8px;
  padding: 5px 4px;
  background-color: #0b0b0bcc;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px #0000004d;
  border: 1px solid rgba(11,11,11,.2);
  padding: 10px;
  div {
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s;
    font-size: 13px;
    line-height: 30px;
    color: #fff;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}
</style>
